<template>
  <div class="common-details">
    <customDetailsTopbar :flag="true" :title="`${secondActive}详情页`" @back="back" />
    <div class="infoWarp listInner px-1">
      <component :is="currentComponent" ref="component" :company-id="companyId" />
    </div>
  </div>
</template>
<script>
import risk from './components/risk.vue'
import processes from './components/processes.vue'
import ledger from './components/ledger.vue'
import explosive from './components/explosive.vue'
import interspace from './components/interspace.vue'
export default {
  components: {
    risk,
    ledger,
    processes,
    explosive,
    interspace
  },
  data() {
    return {
      currentComponent: 'risk',
      list: [
        {
          key: '风险点',
          value: 'risk'
        },
        {
          key: '3-9人危险作业场所',
          value: 'explosive'
        },
        {
          key: '易燃易爆危险点',
          value: 'explosive'
        },
        {
          key: '培训',
          value: 'explosive'
        },
        {
          key: '危险手工工序',
          value: 'processes'
        },
        {
          key: '有限空间',
          value: 'interspace'
        },
        {
          key: '“四新”台账',
          value: 'ledger'
        }
      ],
      companyId: '',
      current: '',
      active: '',
      secondActive: ''
    }
  },
  created() {
    const { current, companyId, active, secondActive } = this.$route.query
    this.companyId = companyId || ''
    this.current = current || ''
    this.active = active || ''
    this.secondActive = secondActive || ''
  },
  mounted() {
    const checkActive = this.secondActive || this.active
    this.list = this.list.find((v) => {
      return v.key.indexOf(checkActive) > -1
    })
    this.currentComponent = this.list.value
  },
  methods: {
    back() {
      const component = this.$refs.component
      if (component.isFourNewsDetail && !component.trainDetail) {
        component.trainDetail = true
      } else {
        this.$router.replace({
          path: '/staging/riskManagement',
          query: { current: this.current, active: this.active, secondActive: this.secondActive }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.infoWarp {
  position: absolute;
  top: 90px;
  right: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}
</style>
